<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" name="" id="j_cbAll">
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" name="" id="">
                    </td>
                    <td>ip8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="" id="">
                    </td>
                    <td>ip8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="" id="">
                    </td>
                    <td>ip8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name="" id="">
                    </td>
                    <td>ip8</td>
                    <td>8000</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        // 点击头部checkbox 则主体所有checkbox全选
        // 第二大步：只要主体复选框有一个没有被选中 就把头部复选框的checked返回值改为flash 这里修改头部复选框的checked值需要借助一个flag变量
        var j_cbAll = document.querySelector('#j_cbAll')
        var j_tb = document.querySelector('#j_tb')
        var ipts = j_tb.querySelectorAll('input')
        j_cbAll.addEventListener('click', function () {
            for (var i = 0; i < ipts.length; i++) {
                ipts[i].checked = this.checked
                ipts[i].addEventListener('click', function () {
                    for (var i = 0; i < ipts.length; i++) {
                        var flag = true
                        if (!ipts[i].checked) {
                            flag = false
                        }
                        j_cbAll.checked = flag


                    }
                })
            }
        })












































        // 6/19练习
        // var j_cbAlls = document.querySelector('#j_cbAll')
        // var j_tbs = document.querySelector('#j_tb')
        // var ipts = j_tbs.querySelectorAll('input')
        // j_cbAlls.onclick = function () {
        //     for (var i = 0; i < ipts.length; i++) {
        //         ipts[i].checked = this.checked
        //     }
        // }
        // for (var i = 0; i < ipts.length; i++) {
        //     ipts[i].onclick = function () {
        //         var flag = true
        //         for (var i = 0; i < ipts.length; i++) {
        //             if (!ipts[i].checked) {
        //                 flag = false
        //             }
        //             j_cbAlls.checked = flag
        //         }
        //     }
        // }













































        // var j_cbAlls = document.querySelector('#j_cbAll')
        // var j_tbs = document.querySelector('#j_tb')
        // var ipts = j_tbs.querySelectorAll('input')
        // j_cbAlls.onclick = function () {
        //     console.log(j_cbAlls.checked);
        //     for (var i = 0; i < ipts.length; i++) {
        //         ipts[i].checked = this.checked
        //     }
        // }
        // for (var i = 0; i < ipts.length; i++) {
        //     ipts[i].onclick = function () {
        //         for (var i = 0; i < ipts.length; i++) {
        //             var flag = true
        //             if (!ipts[i].checked) {
        //                 flag = false
        //             }
        //             j_cbAlls.checked = flag
        //         }
        //     }
        // }









































        // //    1.确定事件源
        // var j_cbAlls = document.querySelector('#j_cbAll')
        // var j_tbs = document.querySelector('#j_tb').querySelectorAll('input')
        // // 2.给头部复选框绑定点击事件
        // j_cbAlls.onclick = function () {
        //     // 3.执行程序 获取头部选择框的checked的返回值赋值给主体所有复选框的checked
        //     console.log(this.checked);//最关键的一步 就是先获取头部checbox选择框的checked的返回值（这是两个东西）
        //     for (var i = 0; i < j_tbs.length; i++) {
        //         j_tbs[i].checked = this.checked
        //     }

        // }
        // // 第二大步：只要主体复选框有一个没有被选中 就把头部复选框的checked返回值改为flash 这里修改头部复选框的checked值需要借助一个flag变量

        // //  先给所有的复选框绑定点击事件 则需要循环
        // for (var i = 0; i < j_tbs.length; i++) {
        //     // 所有复选框绑定点击事件
        //     j_tbs[i].onclick = function () {
        //         // 因为在点击事件发生后 要再次检查所有复选框的checked返回值 所以需要再次循环
        //         for (var i = 0; i < j_tbs.length; i++) {
        //             // 借助一个flag变量 从而根据主体的checked返回值去更改头部checked的返回值
        //             var flag = true
        //             if (!j_tbs[i].checked) {//判断 只要有一个复选框的checked返回值为假（false） 那么头部复选框的checked返回值更改为flash 也就是通过flag变量操作
        //                 flag = false
        //             }
        //             j_cbAlls.checked = flag //最后把判断后结果反馈给头部checked
        //         }
        //     }
        // }
        // var j_cbAll = document.querySelector('#j_cbAll')
        // var j_tb = document.querySelector('#j_tb').querySelectorAll('input')
        // j_cbAll.onclick = function () {
        //     console.log(j_cbAll.checked);
        //     for (var i = 0; i < j_tb.length; i++) {
        //         j_tb[i].checked = this.checked
        //     }
        // }
        // for (var i = 0; i < j_tb.length; i++) {
        //     j_tb[i].onclick = function () {
        //         for (var i = 0; i < j_tb.length; i++) {
        //             var flag = true
        //             if (!j_tb[i].checked) {
        //                 flag = false
        //             }
        //             j_cbAll.checked = flag
        //         }

        //     }
        // }
    </script>
</body>

</html>